<!-- <input type="text" [(ngModel)]="username">
<button (click)="setData()">更改数据</button>
<button (click)="getData()">获取数据</button>
<div>{{ username }}</div>

<app-demo>
    <ng-container class="a">a</ng-container>
    <ng-container class="b">b</ng-container>
</app-demo>

<div *ngIf="task.person">{{ task.person.name }}</div>
<div>{{ task.person?.name }}</div>

<div *ngIf="false">false</div> -->

<!-- <div *ngIf="true; then noData"></div> -->
<!-- <ng-template #noData> 没有更多内容 </ng-template> -->

<!-- <div [hidden]="false">显示</div>
<div [hidden]="true" >隐藏</div>

<div *ngIf="list.length === 0; then noData else listData"></div>
<ng-template #noData> 没有更多内容 </ng-template>
<ng-template #listData>
    <ul>
        <li *ngFor="
            let item of list; 
            let i = index;
            let isFirst = first;
            let isLast = last;
            let isEven = even; 
            let isOdd = odd;
            trackBy: identify
        "
        [ngClass]="{even: isEven, odd: isOdd}"
        >
            <p>
                {{ item.id }}
                {{ item.name }}
                {{ item.age }}
                索引 {{ i }}
                是否是第一项 {{ isFirst }}
                是否是最后一项 {{ isLast }}
            </p>
        </li>
    </ul>
</ng-template>

<div [appHover]="{bgColor: 'blue'}">自定义指令</div> -->

<!-- <div>{{ date }}</div>
<div>{{ date | date }}</div>
<div>{{ date | date: "YYYY-MM-dd" }}</div>
<div>{{ momey | currency: "¥" }}</div>
<div>{{ title | uppercase }}</div>
<div>{{ title | lowercase }}</div>
<div>
    <pre>{{ test | json }}</pre>
</div> -->

<!-- 自定义管道要传递多个参数就需要加 :参数 -->
<!-- <div>{{ paragraph }}</div>
<div>{{ paragraph | summary: 8 }}</div> -->

<!-- 组件通讯 -->
<!-- <app-person name="zhangsan" age="20" (sendData)="getData($event)"></app-person> -->
<!-- <app-person [name]="name" [age]="age" [person]="person">
    <div #box>box</div>
</app-person>
<button (click)="onChangeName()">修改name</button> -->
<!-- <app-demo></app-demo> -->

<!-- <form #f="ngForm" (submit)="onSubmit(f)"> -->
    <!-- 该表单必填,最小长度2位,最大长度6位 -->
    <!-- <input 
        #username="ngModel"
        type="text" 
        ngModel 
        required 
        minlength="4" 
        maxlength="6" 
        name="username" 
    /> -->
    <!-- 在表单已修改并未通过验证且有错误信息时显示错误信息 -->
    <!-- <div *ngIf="username.touched && username.invalid && username.errors">
        <div *ngIf="username.errors.required">请填写用户名</div>
        <div *ngIf="username.errors.minlength">
            用户名最少{{ username.errors.minlength.requiredLength }}个字符
        </div>
        <div *ngIf="username.errors.maxlength">
            用户名最多{{ username.errors.maxlength.requiredLength }}个字符
        </div>
    </div> -->
    <!-- 在表单未通过时禁用按钮 -->
    <!-- <button type="submit" [disabled]="f.invalid">提交</button>
</form> -->

<!-- <form [formGroup]="contactForm" (submit)="onSubmit()">
    <div formGroupName="name">
        <input type="text" formControlName="username">
    </div>
    <input type="text" formControlName="phone">
    <button type="submit">提交</button>
</form> -->

<!-- <app-form-array></app-form-array> -->
<app-validators></app-validators>